<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table{
      border: 1px solid #eee;
      border-collapse: collapse;
    }
    th,td{
      border: 1px solid #eee;
      padding: 10px 16px;
      text-align: center;
    }
    th{
      background: #ccc;
    }
  </style>
</head>
<body>
  <!-- 1、引入依赖 -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <div id="app"></div>

  <!-- 2、编写react代码 -->
  <script type="text/babel">

    class App extends React.Component {
      constructor(props){
        super(props)
        this.state = {
          books: [
            {id: 1, name: '《算法导论》', publichTime: '2006-6', price: 85, nums: 1},
            {id: 2, name: '《UNIX编程艺术》', publichTime: '2006-2', price: 59, nums: 1},
            {id: 3, name: '《编程珠玑》', publichTime: '2008-10', price: 39, nums: 1},
            {id: 4, name: '《代码大全》', publichTime: '2006-3', price: 128, nums: 1},
          ],
        }

      }

      handleCrement(e, count){
        const {books} = this.state
        const newBooks = books.map(item => {
          if (item.id === e) {
            item.nums = item.nums + count
          }
          return item
        })
        this.setState({books: newBooks})
      }


      delItem(e){
        // React中的设计原则：state中数据的不可变性
        const {books} = this.state
        const newBooks = books.filter(item => item.id !== e)
        this.setState({books: newBooks})
      }

      formatPrice(e){
        if (typeof e !== "number") {
          e = Number(e) || 0  //逻辑或用来写默认值
        }
        return `￥${e.toFixed(2)}` 
      }


      bookRender(){
        const { books } = this.state
        const totalPrice = books.reduce((prev,cur) => prev += (parseFloat(cur.price) * parseInt(cur.nums)), 0)
        return (
          <div>
            <table>
              <thead>
                <tr>
                  <th></th>
                  <th>书籍名称</th>
                  <th>出版日期</th>
                  <th>价格</th>
                  <th>购买数量</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                {
                  books.map((item,index) =>{
                    return (
                      <tr key={index}>
                        <td>{item.id}</td>
                        <td>{item.name}</td>
                        <td>{item.publichTime}</td>
                        <td>{this.formatPrice(item.price)}</td>
                        <td>
                          <button disabled={item.nums <= 1} onClick={() => this.handleCrement(item.id, -1)}>-</button>
                          <span> {item.nums} </span>
                          <button onClick={() => this.handleCrement(item.id, 1)}>+</button>
                        </td>
                        <td>
                          <button onClick={() => this.delItem(item.id)}>移除</button>
                        </td>
                      </tr>
                    )
                  })
                }
              </tbody>
            </table>
            <div>总价：{this.formatPrice(totalPrice)}</div>
          </div>
        )
      }

      emptyRender(){
        return (
          <div>购物车为空~</div>
        )
      }

      // 所有组件必须实现render方法
      render() {
        const { books } = this.state
        // 必须用return返回
        return books.length ? this.bookRender() : this.emptyRender()
      }
    }


    ReactDOM.render(<App/>, document.getElementById('app')) 
  </script>
</body>
</html>